<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/">
    <link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <%--bootstrap-table核心css--%>
    <link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css">
    <%--bootstrap-datetimepicker核心css--%>
    <link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">

</head>
<body>

<!-- 返回按钮 -->
<div style="position: relative; top: 35px; left: 10px;">
    <a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
</div>

<!-- 大标题 -->
<div style="position: relative; left: 40px; top: -30px;">
    <div class="page-header">
        <h3>${clue.fullName} <small>${clue.company}</small></h3>
    </div>
    <div style="position: relative; height: 50px; width: 500px;  top: -72px; left: 700px;">
        <button type="button" class="btn btn-default" onclick="window.location.href='jump/workbench/clue/convert';"><span class="glyphicon glyphicon-retweet"></span> 转换</button>

    </div>
</div>

<br/>
<br/>
<br/>

<!-- 详细信息 -->
<div style="position: relative; top: -70px;">
    <div style="position: relative; left: 40px; height: 30px;">
        <div style="width: 300px; color: gray;">名称</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.fullName}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">所有者</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.userName}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 10px;">
        <div style="width: 300px; color: gray;">公司</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.company}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">职位</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.job}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 20px;">
        <div style="width: 300px; color: gray;">邮箱</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.email}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">公司座机</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.phone}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 30px;">
        <div style="width: 300px; color: gray;">公司网站</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.website}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">手机</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.mphone}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 40px;">
        <div style="width: 300px; color: gray;">线索状态</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.state}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">线索来源</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.source}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 50px;">
        <div style="width: 300px; color: gray;">创建者</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${clue.createBy}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">${clue.createTime}</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 60px;">
        <div style="width: 300px; color: gray;">修改者</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${clue.editBy}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">${clue.editTime}</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 70px;">
        <div style="width: 300px; color: gray;">描述</div>
        <div style="width: 630px;position: relative; left: 200px; top: -20px;">
            <b>
                ${clue.description}
            </b>
        </div>
        <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 80px;">
        <div style="width: 300px; color: gray;">联系纪要</div>
        <div style="width: 630px;position: relative; left: 200px; top: -20px;">
            <b>
                ${clue.contactSummary}
            </b>
        </div>
        <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 90px;">
        <div style="width: 300px; color: gray;">下次联系时间</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.nextContactTime}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px; "></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 100px;">
        <div style="width: 300px; color: gray;">详细地址</div>
        <div style="width: 630px;position: relative; left: 200px; top: -20px;">
            <b>
                ${clue.address}
            </b>
        </div>
        <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
</div>

<!-- 备注 -->
<div style="position: relative; top: 40px; left: 40px;">
    <div class="page-header">
        <h4>备注</h4>
    </div>

    <!-- 备注1 -->
    <div id="remarkList">
       <%-- <img title="zhangsan" src="image/user-thumbnail.png" style="width: 30px; height:30px;">
        <div style="position: relative; top: -40px; left: 40px;" >
            <h5>哎呦！</h5>
            <font color="gray">线索</font> <font color="gray">-</font> <b>李四先生-动力节点</b> <small style="color: gray;"> 2017-01-22 10:10:10 由zhangsan</small>
            <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
                <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
            </div>
        </div>--%>
    </div>

    <div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
        <form id="dataForm" role="form" style="position: relative;top: 10px; left: 10px;">
            <textarea id="save-noteContent" class="form-control" style="width: 850px; resize : none;" rows="2"  placeholder="添加备注..."></textarea>
            <p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
                <button id="cancelBtn" type="button" class="btn btn-default">取消</button>
                <button type="button" class="btn btn-primary" onclick="save()">保存</button>
            </p>
        </form>
    </div>

    <!-- 修改市场活动备注的模态窗口 -->
    <div class="modal fade" id="editRemarkModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 40%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">修改备注</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <%-- 备注的id --%>
                        <input type="hidden" id="edit-id">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">内容</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="3" id="edit-noteContent"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="edit()">更新</button>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- 市场活动 -->
<div>
    <div style="position: relative; top: 60px; left: 40px;">
        <div class="page-header">
            <h4>市场活动</h4>
            <table id="tab-activity" class="table table-hover table-striped table-bordered" style="width: 900px"></table>
        </div>
        <div>
            <a href="#" data-toggle="modal" data-target="#bundModal" style="text-decoration: none;" onclick="initTable()"><span class="glyphicon glyphicon-plus"></span>关联市场活动</a>
        </div>
    </div>
</div>

<!-- 关联市场活动的模态窗口 -->
<div class="modal fade" id="bundModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">关联市场活动</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="position: relative; top: 18%; left: 8px;">
                    <form id="searchForm" class="form-inline" role="form">

                        <div class="form-group col-md-12">
                            <input id="userName" type="text" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
                            <button type="button" class="btn btn-primary" onclick="$('#tab').bootstrapTable('refresh');">
                                <span class="glyphicon glyphicon-search"> 搜索</span>
                            </button>
                            <button type="button" class="btn btn-primary"
                                    onclick="$('#searchForm')[0].reset();$('#tab').bootstrapTable('refresh');">
                                <span class="glyphicon glyphicon-refresh"> 清空</span>
                            </button>
                        </div>
                    </form>
                </div>

                <table id="tab" class="table table-hover table-striped table-bordered"></table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveCARBatch()">关联</button>
            </div>
            <!--工具栏和表格-->
            <%--<div id="toolbar">
                <button type="button" class="btn btn-danger" onclick="removeBatch()">
                    <span class="glyphicon glyphicon-trash"> 批量删除</span>
                </button>
            </div>--%>
        </div>
    </div>
</div>

<div style="height: 200px;"></div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<%--bootstrap-table核心js--%>
<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
<%--bootstrap-table中文语言包--%>
<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<%--bootstrap-datetimepicker核心js--%>
<script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<%--bootstrap-datetimepicker中文语言包--%>
<script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">

    //默认情况下取消和保存按钮是隐藏的
    var cancelAndSaveBtnDefault = true;

    $(function(){
        $("#save-noteContent").focus(function(){
            if(cancelAndSaveBtnDefault){
                //设置remarkDiv的高度为130px
                $("#remarkDiv").css("height","130px");
                //显示
                $("#cancelAndSaveBtn").show("2000");
                cancelAndSaveBtnDefault = false;
            }
        });

        $("#cancelBtn").click(function(){
            //显示
            $("#cancelAndSaveBtn").hide();
            //设置remarkDiv的高度为130px
            $("#remarkDiv").css("height","90px");
            cancelAndSaveBtnDefault = true;
        });

        //加载备注列表
        initRemarkList();
        //加载已关联信息
        initTableActivity();
    });

    //在javaScript中通过EL表达式可以直接获取域对象中的数据，
    // 如果获取的数据为数字类型直接使用即可，如果获取的数据为字符串类型需要使用引号包裹
    var clueID = '${clue.id}';
    var userName = '${clue.userName}';
    //加载备注列表
    function initRemarkList(){
        $.ajax('clueRemark/list',{
            type:'get',
            data:{
                clueId:clueID
            },
            success:function (res) {
                if (res.code == 0){
                    var str = '';
                    /**
                     * <!-- 备注2 -->
                     <div class="remarkDiv" style="height: 60px;">
                     <img title="zhangsan" src="image/user-thumbnail.png" style="width: 30px; height:30px;">
                     <div style="position: relative; top: -40px; left: 40px;" >
                     <h5>呵呵！</h5>
                     <font color="gray">市场活动</font> <font color="gray">-</font> <b>发传单</b> <small style="color: gray;"> 2017-01-22 10:20:10 由zhangsan</small>
                     <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
                     <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
                     &nbsp;&nbsp;&nbsp;&nbsp;
                     <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
                     </div>
                     </div>
                     </div>
                     */
                    $.each(res.data,function () {
                        /*str += this.id +"---"+this.noteContent;*/
                        str += '<div class="remarkDiv" style="height: 60px;">';
                        str += '<img title="'+this.createBy+'" src="image/user-thumbnail.png" style="width: 30px; height:30px;">';
                        str += '<div style="position: relative; top: -40px; left: 40px;" >';
                        str += '<h5>'+this.noteContent+'</h5>';
                        str += '<small style="color: gray;"> '+this.createTime+' 由 '+this.createBy+'</small>';
                        str += '<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">';
                        str += '<a class="myHref" href="javascript:get(\''+this.id+'\');"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>';
                        str += '&emsp;';
                        str += '<a class="myHref" href="javascript:remove(\''+ this.id +'\');"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>';
                        str += '</div></div></div>';
                    });
                    $('#remarkList').html(str);


                    $(".remarkDiv").mouseover(function(){
                        $(this).children("div").children("div").show();
                    });

                    $(".remarkDiv").mouseout(function(){
                        $(this).children("div").children("div").hide();
                    });

                    $(".myHref").mouseover(function(){
                        $(this).children("span").css("color","red");
                    });

                    $(".myHref").mouseout(function(){
                        $(this).children("span").css("color","#E6E6E6");
                    });
                }
            }
        });
    }

    //新增
    function save() {
        $.ajax('clueRemark/save',{
            type: 'post',
            contentType:'application/json',
            data:JSON.stringify({
                noteContent:$('#save-noteContent').val(),
                clueId:clueID
            }),
            success:function (res) {
                if (res.code == 0){
                    alert('新增成功')
                    //清除备注表单
                    cancal();
                    //刷新表格
                    initRemarkList();
                }
            }
        })
    }

    //刷新备注表单
    function cancal() {
        //显示
        $("#cancelAndSaveBtn").hide();
        //设置remarkDiv的高度为130px
        $("#remarkDiv").css("height","90px");
        cancelAndSaveBtnDefault = true;
        $('#dataForm')[0].reset();
    }

    //打开编辑回显数据
    function get(id) {
        $.ajax('clueRemark/find/'+id,{
            type:'get',
            success:function (res) {
                if (res.code == 0){
                    //渲染查询到的数据
                    $('#edit-id').val(res.data.id);
                    $('#edit-noteContent').val(res.data.noteContent);
                    //显示模态框
                    $('#editRemarkModal').modal('show');
                }
            }
        })
    }

    //修改更新
    function edit() {
        $.ajax('clueRemark/edit',{
            type: 'put',
            contentType:'application/json',
            data:JSON.stringify({
                id:$('#edit-id').val(),
                noteContent:$('#edit-noteContent').val(),
            }),
            success:function (res) {
                if (res.code == 0){
                    alert('编辑成功')
                    //清除备注表单
                    cancal();
                    //关闭窗体
                    $('#editRemarkModal').modal('hide');
                    //刷新表格
                    initRemarkList();
                }
            }
        })
    }

    //删除
    function remove(id){
        if (confirm('确定删除数据吗？')){
            $.ajax('clueRemark/deleteById/'+id,{
                type:'delete',
                success:function (res) {
                    if (res.code == 0){
                        alert('删除成功！');
                        initRemarkList();
                    }else {
                        //弹出错误提示信息
                        alert(res.data);
                    }
                }
            })
        }
    }

    //初始化已关联表格
    function initTableActivity() {
        //调用组件配置异步表格
        $('#tab-activity').bootstrapTable({

            //http请求方式
            method: 'get',
            url: 'clueActivityRelation/pagelistactivity',
            //工具栏
            toolbar: '#toolbar',
            //处理响应数据格式
            responseHandler: function (res) {
                if (res.code == 0) {
                    return {
                        rows: res.data.list,
                        total: res.data.total
                    };
                }
            },
            //开启分页
            pagination: true,
            //设置服务器端分页
            sidePagination: 'server',
            //设置每页条数
            pageSize: 10,
            //设置每页条数列表
            pageList: [10, 20, 50, 100],
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            //设置bootstrapTable向后台提交分页数据
            queryParamsType: '',
            queryParams: function (params) {
                params.clueId = clueID
                return params;
            },
            // showRefresh: true,
            // showToggle: true,
            // showFullscreen: true,
            //表格中列描述
            columns: [
                {
                    field: 'id',
                    visible: false
                }, {
                    title: '名称',
                    field: 'name',
                    halign: 'center',
                    //值居中
                    align: 'center'
                }, {
                    title: '开始日期',
                    field: 'startDate',
                    halign: 'center',
                    //值居中
                    align: 'center'
                }, {
                    title: '结束日期',
                    field: 'endDate',
                    halign: 'center',
                    //值居中
                    align: 'center'
                }, {
                    title: '所有者',
                    field: 'userName',
                    halign: 'center',
                    //值居中
                    align: 'center'
                }, {
                    title: '操作',
                    halign: 'center',
                    align: 'center',
                    formatter: function (value, row) {
                        return '<button type="button" title="解除关联" class="btn btn-primary btn-xs" onclick="removeClueActivityRelation(\'' + row.id +
                            '\')"><span class="glyphicon glyphicon-remove">解除关联</span></button>';
                    }
                }
            ]
        });
    }

    //解除关联
    function removeClueActivityRelation(id) {
        if (confirm('确定解除关联吗？')) {
            $.ajax('clueActivityRelation/deleteById/' + id, {
                type: 'delete',
                success: function (res) {
                    if (res.code == 0) {
                        alert('解除成功');
                        $('#tab-activity').bootstrapTable('refresh');
                        //刷新未关联表格模态框
                        $('#tab').bootstrapTable('refresh');
                    }else{
                        alert(res.message);
                    }
                }
            });
        }
    }

    //初始化模态框未关联表格
    function initTable() {
        //调用组件配置异步表格
        $('#tab').bootstrapTable({

            width: 500,
            //http请求方式
            method: 'get',
            url: 'clueActivityRelation/pagelist',
            //工具栏
            toolbar: '#toolbar',
            //点击选中
            clickToSelect: true,
            //单选
            singleSelect: false,
            //处理响应数据格式
            responseHandler: function (res) {
                if (res.code == 0) {
                    return {
                        rows: res.data.list,
                        total: res.data.total
                    };
                }
            },
            //开启分页
            pagination: true,
            //设置服务器端分页
            sidePagination: 'server',
            //设置每页条数
            pageSize: 10,
            //设置每页条数列表
            pageList: [10, 20, 50, 100],
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            //设置bootstrapTable向后台提交分页数据
            queryParamsType: '',
            queryParams: function (params) {
                params.name = $('#userName').val();
                params.clueId = clueID
                return params;
            },
            // showRefresh: true,
            // showToggle: true,
            // showFullscreen: true,
            //表格中列描述
            columns: [
                {
                    checkbox: true
                }, {
                    field: 'id',
                    visible: false
                }, {
                    title: '名称',
                    field: 'name',
                    halign: 'center',
                    //值居中
                    align: 'center'
                }, {
                    title: '开始日期',
                    field: 'startDate',
                    halign: 'center',
                    //值居中
                    align: 'center'
                }, {
                    title: '结束日期',
                    field: 'endDate',
                    halign: 'center',
                    //值居中
                    align: 'center'
                }, {
                    title: '所有者',
                    field: 'userName',
                    halign: 'center',
                    //值居中
                    align: 'center'
                }
            ]
        });
    }

    //批量添加关联线索与市场活动
    function saveCARBatch() {
        //获取用户在表格中选择
        var row = $('#tab').bootstrapTable('getSelections');
        if (row.length == 0) {
            alert('请选择需要关联的数据.');
        } else {
            if (!confirm('确定关联该数据吗?')) {
                return;
            }
            var ids = [];
            $.each(row, function () {
                ids.push(this.id);
            });
            console.log(ids)
            $.ajax('clueActivityRelation/inserts', {
                type: 'post',
                data: {
                    clueId:clueID,
                    activityId: ids.join()
                },
                success: function (res) {
                    if (res.code == 0) {
                        alert('关联成功');
                        //刷新未关联表格模态框
                        $('#tab').bootstrapTable('refresh');
                        //刷新已关联模态框
                        $('#tab-activity').bootstrapTable('refresh');

                    }else{
                        alert(res.message);
                    }
                }
            })
        }
    }

</script>
</body>
</html>